<template>
	<view class="settings-page">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">系统设置</text>
			<view class="nav-actions">
				<view class="back-btn" @click="goBack">
					<image src="/static/fanhui.png" class="back-icon"></image>
					<text>返回</text>
				</view>
			</view>
		</view>

		<!-- 设置内容 -->
		<scroll-view class="settings-content" scroll-y>
			<!-- 头像设置 -->
			<view class="setting-section">
				<view class="section-header">
					<text class="section-title">头像设置</text>
				</view>
				<view class="avatar-setting">
					<view class="current-avatar">
						<image :src="currentAvatar" class="avatar-large" mode="aspectFill"></image>
					</view>
					<view class="avatar-options">
						<text class="options-title">选择头像</text>
						<view class="avatar-grid">
							<view 
								v-for="(avatar, index) in avatarList" 
								:key="index"
								class="avatar-option"
								:class="{ active: currentAvatar === avatar }"
								@click="selectAvatar(avatar)">
								<image :src="avatar" class="avatar-small" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 用户名设置 -->
			<view class="setting-section">
				<view class="section-header">
					<text class="section-title">用户名</text>
				</view>
				<view class="input-group">
					<input 
						v-model="user_name" 
						class="input-field" 
						placeholder="请输入用户名"
						maxlength="20">
					<button class="save-btn" @click="updateUsername">保存</button>
				</view>
			</view>

			<!-- 密码设置 -->
			<view class="setting-section">
				<view class="section-header">
					<text class="section-title">修改密码</text>
				</view>
				<view class="password-form">
					<view class="input-group">
						<input 
							v-model="oldPassword" 
							class="input-field" 
							placeholder="请输入原密码"
							password
							maxlength="20">
					</view>
					<view class="input-group">
						<input 
							v-model="newPassword" 
							class="input-field" 
							placeholder="请输入新密码"
							password
							maxlength="20">
					</view>
					<!-- 验证码输入框 -->
					<view class="input-group" :class="{ 'error': verificationCodeError }">
						<input 
							class="input-field" 
							type="text" 
							placeholder="请输入验证码" 
							v-model="verificationCode"
							@blur="validateVerificationCode"
						/>
						<button 
							class="send-code-btn" 
							:disabled="!canSendCode || isSendingCode" 
							@click="sendVerificationCode"
						>
							{{ isSendingCode ? '发送中...' : (countdown > 0 ? `${countdown}s后重试` : '发送验证码') }}
						</button>
					</view>
					<button class="save-btn" @click="updatePassword">修改密码</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { changeUsername, changePassword } from '../../api/api.js'
	export default {
		data() {
			return {
				currentAvatar: '/static/touxiang01.webp',
				avatarList: [
					'/static/touxiang01.webp',
					'/static/touxiang02.webp',
					'/static/touxiang03.webp',
					'/static/touxiang04.webp',
					'/static/touxiang05.webp',
					'/static/touxiang06.webp'
				],
				user_name: '',
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			}
		},
		mounted() {
			// 页面加载时初始化用户名
			this.initUserInfo();
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectAvatar(avatar) {
				this.currentAvatar = avatar
				// 保存头像到本地存储，以便其他页面同步
				uni.setStorageSync('userAvatar', avatar)
				// 触发全局事件，通知其他页面更新头像
				uni.$emit('avatarChanged', avatar)
				uni.showToast({
					title: '头像已更新',
					icon: 'success'
				})
			},
			updateUsername() {
				if (!this.user_name.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return
				}
				
				// 获取用户ID（这里需要从登录状态获取）
				const userInfo = uni.getStorageSync('currentUser');
				if (!userInfo || !userInfo.user_id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				
				// 调用API更新用户名
				changeUsername(userInfo.user_id, this.user_name.trim())
					.then((res) => {
						if (res.success) {
							uni.showToast({
								title: '用户名修改成功',
								icon: 'success'
							})
							// 更新本地存储的用户信息
							userInfo.user_name = this.user_name.trim();
							uni.setStorageSync('currentUser', userInfo);
						} else {
							uni.showToast({
								title: res.message || '修改失败',
								icon: 'none'
							})
						}
					})
					.catch((err) => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						})
					});
			},
			initUserInfo() {
			// 从本地存储获取用户信息
			const userInfo = uni.getStorageSync('currentUser');
			if (userInfo && userInfo.user_name) {
				this.user_name = userInfo.user_name;
			}
			
			// 从本地存储获取用户头像
			const userAvatar = uni.getStorageSync('userAvatar');
			if (userAvatar) {
				this.currentAvatar = userAvatar;
			}
		},
			updatePassword() {
				if (!this.oldPassword || !this.newPassword || !this.confirmPassword) {
					uni.showToast({
						title: '请填写完整密码信息',
						icon: 'none'
					})
					return
				}
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none'
					})
					return
				}
				if (this.newPassword.length < 6) {
					uni.showToast({
						title: '密码长度至少6位',
						icon: 'none'
					})
					return
				}
				
				// 获取用户信息
				const userInfo = uni.getStorageSync('currentUser');
				if (!userInfo || !userInfo.email) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				
				// 这里需要先获取验证码，然后调用密码修改API
				// 由于密码修改需要验证码，这里先提示用户获取验证码
				uni.showModal({
					title: '提示',
					content: '密码修改需要通过邮箱验证，请先获取验证码',
					showCancel: false,
					confirmText: '知道了'
				})
				
				// 在实际实现中，这里应该：
				// 1. 调用发送验证码API
				// 2. 用户输入验证码
				// 3. 调用密码修改API
				// 由于当前API设计需要验证码，这里暂时简化处理
				
				// uni.showToast({
				// 	title: '密码修改成功',
				// 	icon: 'success'
				// })
				// this.oldPassword = ''
				// this.newPassword = ''
				// this.confirmPassword = ''
			}
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}
	
	.settings-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f8f9fa;
	}

	/* 导航栏样式 */
	.nav-bar {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.nav-actions {
		display: flex;
		align-items: center;
	}

	.back-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
		font-size: 28rpx;
	}

	.back-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}

	.settings-content {
		flex: 1;
		padding: 30rpx;
		height: calc(100vh - 120rpx);
	}

	.setting-section {
		background: white;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-header {
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.avatar-setting {
		display: flex;
		align-items: flex-start;
		gap: 40rpx;
	}

	.current-avatar {
		flex-shrink: 0;
	}

	.avatar-large {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid #f1f3f5;
	}

	.avatar-options {
		flex: 1;
	}

	.options-title {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.avatar-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.avatar-option {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 2rpx solid transparent;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.avatar-option.active {
		border-color: #4f5bd5;
		box-shadow: 0 0 0 2rpx rgba(79, 91, 213, 0.2);
	}

	.avatar-option:hover {
		transform: scale(1.05);
	}

	.avatar-small {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.input-group {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 24rpx;
	}

	.input-field {
		flex: 1;
		height: 80rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e9ecef;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #f8f9fa;
	}

	.input-field:focus {
		border-color: #4f5bd5;
		background: white;
	}
	
	.send-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
		font-size: 30rpx;
		font-weight: bold;
		border: none;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
		transition: transform 0.2s;
	}
		
	.send-btn:disabled {
		background: #cccccc;
		box-shadow: none;
	}
		
	.send-btn:active:not(:disabled) {
		transform: translateY(2rpx);
	}

	.save-btn {
		height: 80rpx;
		padding: 0 40rpx;
		background: #4f5bd5;
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.save-btn:active {
		background: #3a45b3;
	}

	.password-form {
		margin-top: 16rpx;
	}
</style>
